@spectrum-web-components/help-text

Description

An <sp-help-text> provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.

Usage

yarn add @spectrum-web-components/help-text

Import the side effectful registration of <sp-help-text> via:

import '@spectrum-web-components/help-text/sp-help-text.js';

When looking to leverage the HelpText base class as a type and/or for extension purposes, do so via:

import { HelpText } from '@spectrum-web-components/help-text';

Sizes

Small

<sp-help-text size="s">Passwords must be at least 8 characters.</sp-help-text>

Medium

<sp-help-text size="m">Passwords must be at least 8 characters.</sp-help-text>

Large

<sp-help-text size="l">Passwords must be at least 8 characters.</sp-help-text>

Extra Large

<sp-help-text size="xl">Passwords must be at least 8 characters.</sp-help-text>

Negative

The negative variant of <sp-help-text> is used to convey error messages. An error message should be different than the informative message otherwise delivers to the visitor and should show a solution for correcting the error that has been encountered.

<sp-help-text variant="negative">
    Create a password with at least 8 characters.
</sp-help-text>

Icon

When associated with content that does not supply an icon outlining the presence of an error, use the icon attribute to display one as part of the <sp-help-text> element.

<sp-help-text variant="negative" icon>
    Create a password with at least 8 characters.
</sp-help-text>

Disabled

When associated to content the is disabled, use the disabled attribute to match the delivery of the <sp-help-text> element to that content.

<sp-help-text disabled>Passwords must be at least 8 characters.</sp-help-text>

Changelog

0.40.5 (2024-02-05)

Bug Fixes

• button: use larger icons in Close Button (c4aa02c)
• combobox: add combobox pattern (#3894) (47d7d71), closes #3887
• menu: process ":active" styles (7917583)
• slider: reimplement gradient slider track application (a10b91e)
• tabs: account for the indicator bar in the overflow decorator (f4a8744)
• theme: expose version property (#3978) (d42bb71)
• theme: include custom Spectrum color tokens in Express color tokens (370a1f1)